<template>
	<div>
		<div>
			<ButtonGroup style="margin:20px">
				<Button @click="click">default</Button>
				<Button type="primary" @click="click">primary</Button>
				<Button type="info" @click="click">info</Button>
				<Button type="success" @click="click">success</Button>
				<Button type="warning" @click="click">warning</Button>
				<Button type="error" @click="click">error</Button>
			</ButtonGroup>
		</div>
		<div>
			<ButtonGroup style="margin:20px" rounded>
				<Button @click="click">default</Button>
				<Button type="primary" @click="click">primary</Button>
				<Button type="info" @click="click">info</Button>
				<Button type="success" @click="click">success</Button>
				<Button type="warning" @click="click">warning</Button>
				<Button type="error" @click="click">error</Button>
			</ButtonGroup>
		</div>
		<div>
			<ButtonGroup style="margin:20px" vertical>
				<Button @click="click">default</Button>
				<Button type="primary" @click="click">primary</Button>
				<Button type="info" @click="click">info</Button>
				<Button type="success" @click="click">success</Button>
				<Button type="warning" @click="click">warning</Button>
				<Button type="error" @click="click">error</Button>
			</ButtonGroup>
		</div>
		<div>
			<ButtonGroup style="margin:20px" drop-down :options="options" type="text" @option-click="optionClick">text</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down :options="options" @option-click="optionClick">default</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down :options="options" type="primary" @option-click="optionClick">primary</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down :options="options" type="info" @option-click="optionClick">info</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down :options="options" type="success" @option-click="optionClick">success</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down :options="options" type="warning" @option-click="optionClick">warning</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down :options="options" type="error" @option-click="optionClick">error</ButtonGroup>
		</div>
		<div>
			<ButtonGroup style="margin:20px" drop-down :options="options" type="text" @option-click="optionClick">
				<template #default>
					选项插槽
				</template>
				<template #option="{option,index}">
					第{{index+1}}项,内容: {{option.label}}
				</template>
			</ButtonGroup>
			<ButtonGroup style="margin:20px" custom drop-down :options="options" type="text" @option-click="optionClick">
				自定义按钮
			</ButtonGroup>
		</div>
		<div>
			<ButtonGroup style="margin:20px" drop-down split @click="click" :options="options">default</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down split @click="click" :options="options" type="primary">primary</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down split @click="click" :options="options" type="info">info</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down split @click="click" :options="options" type="success">success</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down split @click="click" :options="options" type="warning">warning</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down split @click="click" :options="options" type="error">error</ButtonGroup>
		</div>
		<div style="background:rgb(241,245,255)">
			<ButtonGroup style="margin:20px" drop-down outline :options="options">default</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down outline :options="options" type="primary">primary</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down outline :options="options" type="info">info</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down outline :options="options" type="success">success</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down outline :options="options" type="warning">warning</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down outline :options="options" type="error">error</ButtonGroup>
		</div>
		<div style="background:rgb(241,245,255)">
			<ButtonGroup style="margin:20px" drop-down outline split @click="click" :options="options">default</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down outline split @click="click" :options="options" type="primary">primary</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down outline split @click="click" :options="options" type="info">info</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down outline split @click="click" :options="options" type="success">success</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down outline split @click="click" :options="options" type="warning">warning</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down outline split @click="click" :options="options" type="error">error</ButtonGroup>
		</div>
		<div>
			<ButtonGroup style="margin:20px" drop-down rounded :options="options">default</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down rounded :options="options" type="primary">primary</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down rounded :options="options" type="info">info</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down rounded :options="options" type="success">success</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down rounded :options="options" type="warning">warning</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down rounded :options="options" type="error">error</ButtonGroup>
		</div>
		<div>
			<ButtonGroup style="margin:20px" drop-down rounded split @click="click" :options="options">default</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down rounded split @click="click" :options="options" type="primary">primary</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down rounded split @click="click" :options="options" type="info">info</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down rounded split @click="click" :options="options" type="success">success</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down rounded split @click="click" :options="options" type="warning">warning</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down rounded split @click="click" :options="options" type="error">error</ButtonGroup>
		</div>
		<div style="background:rgb(241,245,255)">
			<ButtonGroup style="margin:20px" drop-down outline rounded :options="options">default</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down outline rounded :options="options" type="primary">primary</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down outline rounded :options="options" type="info">info</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down outline rounded :options="options" type="success">success</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down outline rounded :options="options" type="warning">warning</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down outline rounded :options="options" type="error">error</ButtonGroup>
		</div>
		<div style="background:rgb(241,245,255)">
			<ButtonGroup style="margin:20px" drop-down outline rounded split @click="click" :options="options">default</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down outline rounded split @click="click" :options="options" type="primary">primary</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down outline rounded split @click="click" :options="options" type="info">info</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down outline rounded split @click="click" :options="options" type="success">success</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down outline rounded split @click="click" :options="options" type="warning">warning</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down outline rounded split @click="click" :options="options" type="error">error</ButtonGroup>
		</div>
		<div>
			<ButtonGroup style="margin:20px" drop-down disable :options="options" type="text">text</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down disable :options="options">default</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down disable :options="options" type="primary">primary</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down disable :options="options" type="info">info</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down disable :options="options" type="success">success</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down disable :options="options" type="warning">warning</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down disable :options="options" type="error">error</ButtonGroup>
		</div>
		<div>
			<ButtonGroup style="margin:20px" drop-down split @click="click" disable :options="options">default</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down split @click="click" disable :options="options" type="primary">primary</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down split @click="click" disable :options="options" type="info">info</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down split @click="click" disable :options="options" type="success">success</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down split @click="click" disable :options="options" type="warning">warning</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down split @click="click" disable :options="options" type="error">error</ButtonGroup>
		</div>
		<div>
			<ButtonGroup style="margin:20px" drop-down split @click="click" disable-click :options="options">default</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down split @click="click" disable-click :options="options" type="primary">primary</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down split @click="click" disable-click :options="options" type="info">info</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down split @click="click" disable-click :options="options" type="success">success</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down split @click="click" disable-click :options="options" type="warning">warning</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down split @click="click" disable-click :options="options" type="error">error</ButtonGroup>
		</div>
		<div>
			<ButtonGroup style="margin:20px" drop-down :options="options" type="primary">click 触发</ButtonGroup>
			<ButtonGroup style="margin:20px" drop-down trigger="mouseenter" :options="options" type="primary">mouseenter 触发</ButtonGroup>
		</div>
	</div>
</template>

<script>
import ButtonGroup from '@/components/pc/button-group';
import Button from '@/components/pc/button';
export default {
	name:'index',
	components:{
		ButtonGroup,
		Button
	},
	data(){
		const options=[
		];
		for(let i=1;i<7;++i){
			options.push({
				label:'选'.repeat(i),
				value(){
					console.log('选项'+i);
				},
				extra:i,
			});
		}
		return {
			options
		};
	},
	methods:{
		click(){
			console.log('点击');
		},
		optionClick(option){
			console.log(option);
		},
	}
};
</script>

<style lang="scss">

</style>
